---
id: unit3
title: plugins
---

打包时提供的扩展功能
## htmlwebpackPlugin 插件

自动生成一个 html 文件，并把打包生成的 js 自动引入到这个 html 文件中。

```js
npm install --save-dev html-webpack-plugin@3

```

```js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  entry: "index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "index_bundle.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html", // 提前准备的index.html模版
    }),
  ],
};
```

## clean-webpack-plugin 插件
打包前先清空一下打包目录

```js
npm install --save-dev clean-webpack-plugin@4

```

```js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


module.exports = {
  entry: "index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "index_bundle.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html", // 提前准备的index.html模版
    }),
    new CleanWebpackPlugin()
  ],
};
```